<template>

	<!-- <view class="xflex-x select">
		<view class="select_box" :class="order.type ==1?'active':''" @click="onActive(1)">订单列表1</view>
		<view class="select_box" :class="order.type ==2?'active':''" @click="onActive(2)">订单列表2</view>
		<view class="select_box" :class="order.type ==3?'active':''" @click="onActive(3)">订单列表3</view>
	</view> -->

	<view class="goods xbgf pa30 xmt24">
		<view class="xflex-x-between">
			<view class="">
				产品销售单
			</view>
			<!-- <image class="goods_icon" src="/static/image/del.png" mode=""></image> -->
		</view>
		<view class="xflex-x-between xfz24 xfw500 xc9 xmt20">
			<view class="xflex1">
				单据类型：
			</view>
			<view class="xflex1">
				单据日期：
			</view>
		</view>
		<view class="xflex-x-between xfz24 xfw500 xc9 xmt20">
			<view class="xflex1">
				单号：
			</view>
			<view class="xflex1">
				购货单位：
			</view>
		</view>
		<view class="xflex-x-between xfz24 xfw500 xc9 xmt20">
			<view class="xflex1">
				可用余额：
			</view>
			<view class="xflex1">
				结算方式：转账
			</view>
		</view>
	</view>

	<view class="xmt24">
		<view class="goods xbgf pa30" v-for="(item,index) in order.list" :key="index">
			<view class="xfz24 xc3 xfw500">
				{{item.goods.classification_name}}
			</view>
			<view class="goods-item">
				<view class="">
					{{item.goods.name}}
				</view>
				<view class="xpb32 xbb8D">

					<view class="xflex-x-between xfz24 xfw500 xc9 xmt20">
						<view class="" v-if="bhShow == 1">
							编号：{{item.goods.sn}}
						</view>
						<view class="" v-if="ggShow == 1">
							规格：{{item.goods.spec_name}}
						</view>
					</view>
					<view class="xflex-x-between xfz24 xfw500 xc9 xmt20">
						<view class="">
							单位：{{item.goods.unit}}
						</view>
						<view class="">
							数量：<text color="color1">{{item.goods_num}}</text>
						</view>
					</view>

					<view class="xflex-x-between xfz24 xfw500 xc9 xmt20" v-if="priceShow">
						<view class="">
							单价：<text class='color1'>{{item.goods.goods_price}}</text>
						</view>
						<view class="">
							散提费：{{item.goods.car_price}}
						</view>
					</view>
				</view>
				<view class="goods-money xmt32 xfz28 xfw500 xc9" v-if="priceShow">
					销售金额：<text class="color1">￥ {{ item.goods_num * item.goods.goods_price }}</text>
				</view>
			</view>
		</view>
	</view>

	<view class="goods xmt10 xbgf">
		<view class="xflex-x-between xpb32">
			<view class="">
				总数量：
			</view>
			<view class="">
				{{order.list.length}}
			</view>
		</view>
		<view class="xflex-x-between  xpb32"  v-if="priceShow">
			<view class="">
				合计:
			</view>
			<view class="">
				{{su.total_money}}
			</view>
		</view>
		<view class="xflex-x-between xpb32"  v-if="priceShow">
			<view class="">
				大写：
			</view>
			<view class="">
				{{changeMoneyToCN(su.total_money)}}
			</view>
		</view>
		<!-- <view class="xpb32">
			<view class="">
				备注：
			</view>
			<view class="xmt24">
				<u--textarea v-model="value1" placeholder="请输入内容"></u--textarea>
			</view>
		</view> -->
	</view>

	<view class="" style="height: 80rpx;">

	</view>

	<view class="xbottom xflex-x-between">
		<view class="fh"  @click="bre()">
			返回上一步
		</view>
		<view class="export" @click="getcartExport()" v-if="ordershow == 1">
			导出数据
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue';
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		getGoodsDetail,
		cartLists,
		cartAdd,
		cartChange,
		cartFace,
		cartDel,
		cartExport,
		cartCalc,
		getPriceShow,
		site,
		accesslists
	} from '@/network/home.js';

	import {
		changeMoneyToCN
	} from "@/utils/common.js"
	// 订单
	const order = reactive({
		list: [],
		page: 1,
		type: 1
	})
	
	// 价格是否显示
	let priceShow = ref(true)
	// getPriceShow().then(res=>{
	// 	// console.log(res.data ==1,"====");
	// 	priceShow.value = true
	// })
	
	let ordershow = ref(0)
	let bhShow = ref(0)
	let ggShow = ref(0)	
	let dwShow = ref(0)
	let slShow = ref(0)
	let djShow = ref(0)
	let bzShow = ref(0)
	
	
	accesslists().then(res=>{
		console.log(res);
		ordershow.value = res.data.goodsinfo_classification
		bhShow.value = res.data.goodsinfo_sn
		ggShow.value = res.data.goodsinfo_spec
		// dwShow.value = res.data.goodsinfo_sn
		// bhShow.value = res.data.goodsinfo_sn
		// bhShow.value = res.data.goodsinfo_sn
		
		
		
	})
	
	const onActive = (e) => {
		order.type = e
		// console.log();
		getCart()
		getcartCalc()
	}
	const bre = ()=>{
		uni.navigateBack()
	}

	const getCart = () => {
		console.log("111111");
		cartLists({
			page_no: order.page,
			page_size: 10,
			type: order.type,
			method:'mnp',
			settle:1,
		}).then(res => {
			console.log(res);
			res.data.lists.map(item => {
				item.show = false
				item.select = false
			})
			order.list = res.data.lists
		})
	}

	const getcartExport = () => {
		cartExport({
			type: order.type,
			method:'mnp'
		}).then(res => {
			console.log(res);
			// uni.saveFileToDisk({ //保存
			// 	filePath: res.data.url, //保存文件地址
			// 	success: function(res) { //成功后的回调函数
			// 		console.log(res.savedFilePath)
			// 	},
			// 	fail:function(err) { //成功后的回调函数
			// 		console.log(err)
			// 	},
			// })
			uni.downloadFile({
				url: res.data.url, //仅为示例，并非真实接口地址。
				complete: (e) => {
					console.log(e);
					uni.openDocument({
						filePath:e.tempFilePath
					})
					uni.saveFileToDisk({ //保存
						filePath: e.tempFilePath, //保存文件地址
						success: function(res) { //成功后的回调函数
							console.log(res.savedFilePath)
						}
					})
				}
			})
		})
	}

	// 合计
	let su = reactive({
		total_money: 0,
		total_num: 0,
		total_sum: 0
	})
	const getcartCalc = () => {
		cartCalc({method:'mnp',type: order.type,}).then(res => {
			console.log(res);
			su.total_money = res.data.total_money
			su.total_num = res.data.total_num
			su.total_sum = res.data.total_sum
		})
	}



	onLoad((option) => {
		// goods.id = option.id;
		order.type = option.type
		getCart()
		getcartCalc()
	});
</script>

<style lang="scss">
	.color1 {

		color: #F64D24;
	}

	.content {
		padding: 27rpx 66rpx 23rpx 36rpx;
	}

	.select {
		padding: 54rpx 30rpx 13rpx;

		&_box {
			width: 180rpx;
			height: 72rpx;
			background: #CCCCCC;
			border-radius: 10rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.active {
			background: #3F7233;
		}
	}

	.goods {
		padding: 30rpx;
		box-sizing: border-box;

		&_icon {
			width: 40rpx;
			height: 40rpx;
			background: #EEEEEE;
			border-radius: 50%;
		}

		&-item {
			background: #F5F5F5;
			padding: 30rpx;
			margin: 20rpx 0;
		}

		&-money {
			text-align: right;
		}
	}

	:deep.u-border {
		border-style: none !important;
	}

	:deep.u-textarea {
		background: #F5F5F5 !important;
	}

	.fh {
		width: 320rpx;
		height: 72rpx;
		background: #333333;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
	}

	.export {
		width: 320rpx;
		height: 72rpx;
		background: #3F7233;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 72rpx;
		text-align: center;
	}
</style>